<template>
  <div class="movie-detail" v-loading="movieStore.loading">
    <el-row v-if="movie" :gutter="30">
      <el-col :xs="24" :sm="10" :md="8" :lg="6">
        <el-card class="poster-card" shadow="hover">
          <div class="poster-wrapper">
            <img :src="`http://localhost:8000${movie.poster_url}`" :alt="movie.title" class="movie-poster">
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="14" :md="16" :lg="18">
        <el-card class="info-card" shadow="hover">
          <div class="title-rating">
            <h1 class="movie-title">{{ movie.title }}</h1>
            <div class="movie-rating">
              <el-rate v-model="movie.rating" disabled show-score text-color="#ff9900" score-template="{value} 分" />
              <span class="vote-count">({{ formatVoteCount(movie.votes) }}人评分)</span>
            </div>
          </div>
          
          <div class="movie-info">
            <p><strong>导演：</strong>{{ movie.director }}</p>
            <p><strong>主演：</strong>{{ movie.actors.join('、') }}</p>
            <p><strong>类型：</strong>{{ movie.genres.join(' / ') }}</p>
            <p><strong>上映日期：</strong>{{ formatDate(movie.release_date) }}</p>
          </div>
          
          <div class="movie-summary">
            <h3>剧情简介</h3>
            <p>{{ movie.summary }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row v-if="movieStore.error">
      <el-col :span="24">
        <el-alert :title="movieStore.error" type="error" />
      </el-col>
    </el-row>

    <div v-if="movie" class="recommendations">
      <h2>相似电影推荐</h2>
      <el-row :gutter="20">
        <el-col v-for="rec in movieStore.recommendations" :key="rec.id" 
                :xs="12" :sm="8" :md="6" :lg="4">
          <MovieCard :movie="rec" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { onMounted, computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useMovieStore } from '@/stores/movie'
import MovieCard from '@/components/MovieCard.vue'

const route = useRoute()
const movieStore = useMovieStore()

const movie = computed(() => movieStore.currentMovie)

const formatVoteCount = (count) => {
  if (count >= 10000) {
    return (count / 10000).toFixed(1) + '万'
  }
  return count
}

const formatDate = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

const loadMovieData = async (movieId) => {
  try {
    await movieStore.fetchMovieDetails(movieId)
    await movieStore.fetchRecommendations(movieId)
  } catch (error) {
    console.error('Failed to load movie data:', error)
  }
}

onMounted(async () => {
  await loadMovieData(route.params.id)
})

// 监听路由参数变化
watch(
  () => route.params.id,
  async (newId) => {
    if (newId) {
      await loadMovieData(newId)
      // 滚动到页面顶部
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }
  }
)
</script>

<style scoped>
.movie-detail {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.poster-card {
  margin-bottom: 20px;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.poster-wrapper {
  width: 100%;
  height: 0;
  padding-bottom: 120%;
  position: relative;
  overflow: hidden;
  background-color: #f5f7fa;
}

.movie-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}

.movie-poster:hover {
  transform: scale(1.05);
}

.info-card {
  height: 100%;
  padding: 20px;
}

.title-rating {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.movie-title {
  margin: 0;
  font-size: 24px;
  color: #303133;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.movie-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.vote-count {
  color: #909399;
  font-size: 14px;
}

.movie-info {
  margin: 20px 0;
  line-height: 1.8;
}

.movie-info p {
  margin: 10px 0;
  color: #606266;
}

.movie-info strong {
  color: #303133;
  margin-right: 10px;
  font-weight: 600;
}

.movie-summary {
  margin: 30px 0;
}

.movie-summary h3 {
  font-size: 18px;
  color: #303133;
  margin-bottom: 15px;
}

.movie-summary p {
  color: #606266;
  line-height: 1.8;
  text-align: justify;
}

.recommendations {
  margin-top: 50px;
}

.recommendations h2 {
  font-size: 20px;
  color: #303133;
  margin-bottom: 30px;
  padding-bottom: 10px;
  border-bottom: 2px solid #409EFF;
}

@media (max-width: 768px) {
  .movie-detail {
    padding: 10px;
  }
  
  .movie-title {
    font-size: 20px;
  }
  
  .info-card {
    padding: 15px;
  }
}
</style> 